<template>
  <div class="ck-school-list-box">
    <div style="height: 53px;">

    </div>
    <!-- 顶部状态栏切换 -->
    <div class="tab-switch-box">
       <!-- <div class="left">
          <i class="iconfont icon-tubiao04"></i>
       </div> -->
       <div class="right">
          <div class="item-flex">

            <div class="item" @click="typeSwitch(1)" :class="type == 1? 'item-action':''">
              <div class="text" :style="type == 2 ? 'border:none;':'' ">偏高</div>
            </div>

            <div class="item"  @click="typeSwitch(2)"  :class="type == 2? 'item-action':''">
              <div class="text"  :style="type == 3 ? 'border:none;':'' ">适中</div>
            </div>

            <div class="item"  @click="typeSwitch(3)"  :class="type == 3? 'item-action':''">
              <div class="text">偏低</div>
            </div>

          </div>
       </div>
    </div>
     <!-- 顶部状态栏切换end -->

     <!-- 学校列表 -->
     <div class="school-list-box">
        <!-- <div class="left">
          <div class="es-list" v-for="(item,index) in esList" :key="index">
            {{item}}
          </div>
        </div> -->
        <div class="right">

          <div class="list-item">
            <div class="list-text">蓝天幼儿园</div>
            <div class="list-icon">
              <div class="value">
                <div class="value-text">偏高:<span class="vaule-action">15%</span></div>
                <div class="value-text">适中:<span>15%</span></div>
                <div class="value-text">偏低:<span>15%</span></div>
              </div>
              <i class="iconfont icon-youjiantou"></i>
            </div>
          </div>


        </div>
     </div>


     <!-- 学校列表 end-->



  </div>
</template>

<script>
  export default{
    name:"ck_school_list",
    data(){
      return{
        esList:['A', 'B', 'C', 'D', 'E', 'F', 'G','H', 'I', 'J', 'K', 'L', 'M',
        'N','O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
        type:1,
        
      }
    },
    methods:{
      typeSwitch(type){
        this.type = type
      }
    }
  }
</script>

<style lang="stylus">
  html{
    background: #FFFFFF;
  }
  body{
    background: #FFFFFF;
  }
  .ck-school-list-box{
    width: 100%;
    height: 100%;
    position:relative;

    /* 顶部状态切换 */
    .tab-switch-box{
      width:100%;
      height:42px;
      border-bottom:1px solid #c9c9c9;
      background:#FFFFFF;
      .left{
        width:40px;
        float:left;
        height:100%;
        line-height:42px;
        text-align:center;
        border-right:1px solid #c9c9c9;
        .iconfont{
          font-size:20px;
          color:#fcb251;
        }
      }
      .right{
        width:100%;
        float:left;
        height:100%;
        .item-flex{
          width:100%;
          height:100%;
          display:flex;
          justify-content:flex-start;
          align-items:center;
          .item{
            text-align:center;
            flex-grow:1;
            height:100%;
            background:#FFFFFF;
            color:#717171;
            font-size:12px;
            .text{
              height:26px;
              border-right:1px solid #717171;
              line-height:26px;
              margin-top:8px;
            }
          }
          .item:nth-of-type(3){
            .text{
              border:none;
            }
          }
          .item-action{
            background:#fcb251;
            color:#FFFFFF;
            .text{
              border-color:#fcb251;
            }
          }

        }
      }
    }
    /* 顶部状态切换end */



    .school-list-box{
      position:fixed;
      top:96px;
      left:0;
      right:0;
      width:100%;
      height:calc(100% - 96px);
      z-index:100;
      background:#FFFFFF;
      .left{
        width:40px;
        float:left;
        height:100%;
        overflow-y:auto;
        border-right:1px solid #c9c9c9;
        .es-list{
          width:100%;
          height:55px;
          text-align:center;
          line-height:55px;
          color:#717171;
          font-size:12px;
        }
      }
      .right{
        width:100%;
        float:left;
        height:100%;
        overflow-y:auto;
        .list-item{
          width:100%;
          height:54px;
          line-height:54px;
          border-bottom:1px solid #c9c9c9;
          color:#717171;
          font-size:12px;
          .list-text{
            width:calc(100% - 100px);
            float:left;
            box-sizing:border-box;
            padding-left:16px;
            padding-right:10px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
          .list-icon{
            width:100px;
            float:right;
            box-sizing:border-box;
            padding-right:16px;
            text-align:right;
            .iconfont{
              font-size:16px;
            }
          }
        }
      }
    }


  }
</style>
